@if (enableAccessories) {
<div class="row mb-3">
  <div class="col-9 col-sm-6">
    <h3 class="primary-text m-0">{{ 'menu.label_accessories' | translate }}</h3>
  </div>
  <div class="col-3 col-sm-6 text-end d-inline-block d-sm-none">
    <button
      type="button"
      class="btn btn-elegant my-0 me-0"
      (click)="openSupport()"
      [attr.aria-label]="'support.title' | translate"
    >
      <i class="fa fa-question-circle-o"></i>
    </button>
  </div>
  <div class="col-3 col-sm-6 text-end d-none d-sm-inline-block">
    @if (hasPlugins) {
    <button
      type="button"
      class="btn btn-elegant my-0 me-2"
      [hidden]="isMobile"
      (click)="addRoom()"
      container="body"
      placement="bottom"
      [openDelay]="150"
      triggers="hover"
      [ngbTooltip]="'accessories.button_add_room' | translate"
      [attr.aria-label]="'accessories.button_add_room' | translate"
    >
      <i class="fas fa-folder-plus"></i>
    </button>
    <button
      type="button"
      class="btn btn-elegant my-0 me-2"
      [hidden]="isMobile"
      (click)="hideHidden = !hideHidden"
      container="body"
      placement="bottom"
      [openDelay]="150"
      triggers="hover"
      [ngbTooltip]="hideHidden ? ('accessories.button_hidden_show' | translate) : ('accessories.button_hidden_hide' | translate)"
      [attr.aria-label]="hideHidden ? ('accessories.button_hidden_show' | translate) : ('accessories.button_hidden_hide' | translate)"
    >
      <i
        class="fas"
        [ngClass]="{
        'fa-eye': !hideHidden,
        'fa-eye-slash': hideHidden
      }"
      ></i>
    </button>
    <div class="btn-group me-2" role="group">
      <button
        type="button"
        class="btn btn-elegant my-0"
        [disabled]="!isMobile"
        (click)="toggleLayoutLock()"
        container="body"
        placement="bottom"
        [openDelay]="150"
        triggers="hover"
        [ngbTooltip]="'form.button_unlock' | translate"
        [attr.aria-label]="'form.button_unlock' | translate"
      >
        <i class="fas fa-unlock"></i>
      </button>
      <button
        type="button"
        class="btn btn-elegant my-0"
        [disabled]="isMobile"
        (click)="toggleLayoutLock()"
        container="body"
        placement="bottom"
        [openDelay]="150"
        triggers="hover"
        [ngbTooltip]="'form.button_lock' | translate"
        [attr.aria-label]="'form.button_lock' | translate"
      >
        <i class="fas fa-lock"></i>
      </button>
    </div>
    }
    <button
      type="button"
      class="btn btn-elegant my-0 me-0"
      (click)="openSupport()"
      [attr.aria-label]="'support.title' | translate"
    >
      <i class="fa fa-question-circle-o"></i>
    </button>
  </div>
</div>
@if (loading) {
<app-spinner />
} @else { @if (hasPlugins) {
<div [dragula]="'rooms-bag'" [(dragulaModel)]="$accessories.rooms">
  @for (room of $accessories.rooms; track room) {
  <div>
    @if (!isMobile || room.services.length) {
    <div class="row">
      <div class="col-md-12">
        <h5 class="primary-text drag-handle room-title m-0 mb-1 mb-sm-0" [ngClass]="{ 'cursor-move': !isMobile }">
          {{ room.name === 'Default Room' ? ('accessories.control.default_room' | translate) : room.name }}
        </h5>
      </div>
    </div>
    }
    <div class="row mb-4">
      @if (room.services.length) {
      <div
        class="col-md-12 d-flex flex-wrap noselect services-bag"
        [ngClass]="{ 'justify-content-between': isMobile }"
        [dragula]="'services-bag'"
        [(dragulaModel)]="room.services"
      >
        @for (service of room.services; track service) { @if (!hideHidden || !service.hidden) {
        <div class="accessory-item accessory-tab">
          <app-accessory-tile [service]="service" />
        </div>
        } }
        <div style="height: 0" class="accessory-box invisible py-0 my-0"></div>
        <div style="height: 0" class="accessory-box invisible py-0 my-0"></div>
        <div style="height: 0" class="accessory-box invisible py-0 my-0"></div>
        <div style="height: 0" class="accessory-box invisible py-0 my-0"></div>
        <div style="height: 0" class="accessory-box invisible py-0 my-0"></div>
        <div style="height: 0" class="accessory-box invisible py-0 my-0"></div>
        <div style="height: 0" class="accessory-box invisible py-0 my-0"></div>
        <div style="height: 0" class="accessory-box invisible py-0 my-0"></div>
        <div style="height: 0" class="accessory-box invisible py-0 my-0"></div>
        <div style="height: 0" class="accessory-box invisible py-0 my-0"></div>
      </div>
      } @if (!room.services.length && !isMobile) {
      <div class="col-md-12 d-flex flex-wrap noselect" [dragula]="'services-bag'" [(dragulaModel)]="room.services">
        <app-drag-here-placeholder class="no-drag" />
      </div>
      }
    </div>
  </div>
  }
</div>
} @else {
<div class="col-12 text-center">
  <div class="alert alert-warning p-5" role="alert">
    <div class="text-center mb-3">
      <i class="fas fa-plug primary-text" style="font-size: 75px"></i>
    </div>
    <h5 class="mb-3 mt-0">{{ 'accessories.no_plugins.title' | translate }}</h5>
    <p class="mb-0 small">{{ 'accessories.no_plugins.message_1' | translate }}</p>
    <p class="mb-0 small mt-2">{{ 'accessories.no_plugins.message_2' | translate }}</p>
  </div>
</div>
} } } @else {
<div class="row">
  <div class="col-12">
    <h3 class="primary-text m-0 mb-3">{{ 'menu.label_accessories' | translate }}</h3>
  </div>
  <div class="col-12 text-center">
    <div class="alert alert-warning p-4" role="alert">
      <div class="text-center mb-3">
        <i class="fas fa-lightbulb primary-text" style="font-size: 75px"></i>
      </div>
      <h5 class="mb-3 mt-0">{{ 'accessories.control_disabled' | translate }}</h5>
      <p
        class="mb-0 small"
        [innerHTML]="'accessories.message_must_use_insecure_mode' | translate: { link: linkInsecure }"
      ></p>
      @if (isAdmin) {
      <p class="mt-2 mb-0 small">{{ 'accessories.settings_link' | translate }}</p>
      }
    </div>
  </div>
</div>
}
